import React, { Component } from "react";
import { Card, Icon, List, Table } from "antd";
import LinkButton from "../../../components/link-button";

class strategicDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const data = [
      "window漏洞",
      "其他漏洞",
      "SSH漏洞",
      "办公软件漏洞",
      "DNS漏洞",
    ];
    const title = (
      <div style={{ fontSize: "14px", border: "none" }}>
        <span>策略组名称</span>&nbsp;&nbsp;&nbsp;
        <LinkButton>快速扫描</LinkButton>
      </div>
    );
    const dataSource = [
      {
        key: "1",
        name: "胡彦斌",
        CVSS: 10.0,
        CVE: "CVE-1999-0002",
      },
      {
        key: "2",
        name: "胡彦祖",
        CVSS: 10.0,
        CVE: "CVE-1999-0003",
      },
    ];
    const columns = [
      {
        title: "策略名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "CVSS",
        dataIndex: "CVSS",
        key: "CVSS",
      },
      {
        title: "CVE",
        dataIndex: "CVE",
        key: "CVE",
      },
    ];

    return (
      <div>
        <div style={{ margin: 10, fontSize: 20 }}>
          <LinkButton
            style={{ padding: 5 }}
            onClick={() => this.props.history.goBack()}
          >
            <Icon type="arrow-left" />
          </LinkButton>

          <span>查看主机策略</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <Card title={title} style={{ width: 200 }} bordered={false}>
            <List
              split={false}
              dataSource={data}
              renderItem={(item) => (
                <List.Item>
                  <Icon type="right" />
                  {item}
                </List.Item>
              )}
            />
          </Card>
          <Card title="策略模板描述" bordered={false} style={{ width: 1000 }}>
            <Table
              dataSource={dataSource}
              columns={columns}
              pagination={{ defaultPageSize: 1 }}
            />
          </Card>
        </div>
      </div>
    );
  }
}

export default strategicDetail;
